<template>
  <div class="chart-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" ></el-table-column>
      <el-table-column prop="name" label="姓名" ></el-table-column>
    
      <el-table-column  label="助理最终考勤确认">
        <template slot-scope="scope">
            <el-select
              v-model="scope.row.card_r_reason"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
       </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>



    </el-table>
    <button @click="getTableDataFm">点击</button>
  </div>
</template>

<script>
export default {
  name: "demoCombine",
  filters: {},
  data() {
    return {
      typeList: [{
          value: '黄金糕',
          label: '黄金糕'
        }, {
          value: '双皮奶',
          label: '双皮奶'
        }, {
          value: '蚵仔煎',
          label: '蚵仔煎'
        }, {
          value: '龙须面',
          label: '龙须面'
        }, {
          value: '北京烤鸭',
          label: '北京烤鸭'
        }],
        value: '',

      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          card_r_reason:"",
          startTime:"",
          endTime:"",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          card_r_reason:"",
          startTime:"",
          endTime:"",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          card_r_reason:"",
          startTime:"",
          endTime:"",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          card_r_reason:"",
          startTime:"",
          endTime:"",
        }
      ]
    };
  },
  created() {},
  mounted() {
    //this.getList();
  },
  methods: {
      changeTime (row) {
        console.log(row)
        //   if (row.begiN_TIME && row.enD_TIME) {
        //    this.GetDuration([row]);
        //    this.$refs.singleTable.toggleRowSelection(row, true);
        //  }

      },
      getTableDataFm(){
         console.log(this.tableData)

      },

   
    handlerData () {
      this.startTime = new Date().getTime() // 获取触发轮询时的时间
      this.inquireData() // 调用轮询接口,开始进行轮询
    },
    inquireData () {
      const reload = () => {
        clearTimeout(this.timer) // 清除定时器
        // 超过30分钟则停止轮询
        if (new Date().getTime() - this.startTime > 30 * 60 * 1000) {
          clearTimeout(this.timer)
          return
        }
        // 3s一次, 轮询中
        this.timer = setTimeout(() => {
          this.inquireData() // 调用轮询
        }, 3000)
      }
 
      getInquireData()
        .then(res => {
          if (res && res.code === '200') {
            // 需要查询的接口返回成功了,做相应的处理
          } else {
            // 没成功,调用轮询
            reload()
          }
        })
        .catch(err => {
          // 请求错误,也继续轮询
          reload()
        })
    }






  }
};
</script>

<style>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  /* display:flex;
  flex-wrap:wrap; */
}
</style>
